<script>
import HeaderCom from "@/components/headerCom.vue";
import FooterCom from "@/components/footerCom.vue";

export default {     //默认导出
  name: "indexPage",
  components: {FooterCom, HeaderCom},
  data(){
    return {
      msg:'这是index',
      flag:true,
      // com:'HeaderCom',
      // com:'headerCom',
      com:'header-com'
    }
  },


  methods:{
    addNew(){
      // 可以获取到定义在子组件上的数据和方法
      this.$refs['header-com'].add()
    }
  },
 /* created() {
    console.log(document.getElementById('box'),'box')   //拿不到dom元素
  },*/
  mounted(){
    // console.log(document.getElementById('box'),'box')
    // 获取dom元素
    console.log(this.$refs)
    console.log(this.$refs.box123)
    console.log(this.$refs['header-com'])
    // console.log(this.$refs.headerCom)
  }



}
</script>
<!--高耦合：按功能划分     每个文件只干一类功能，这些功能是类似的
    低内聚：文件与文件之间的联系减少-->
<!-- 模块化和组件化的区别：
    模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
    组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用
  注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹-->
<template>
<div>
<!--  在父组件中用子组件：把子组件名作为标签去使用    -->
<!--  引入头部组件-->
<!--  数据隔离：当点击其中一个按钮时，其他num不会增加-->
  <header-com></header-com>
<!--  <header-com></header-com>-->
<!--  <header-com></header-com>-->



  indexPage
<!--  其他页面可以使用全局过滤器-->
  {{msg |setMsg('index')}}


  <router-link to="/about">去about页面</router-link>



<!--切换子组件：
方法1：-->
<!--  <button @click="flag=!flag">切换组件</button>
  <header-com v-if="flag"></header-com>
&lt;!&ndash;  引入底部组件&ndash;&gt;
  <footer-com v-else></footer-com>-->



<!-- 切换：可以使用动画   动画1 借助style的样式
方法2：-->
<!--  <button @click="flag=!flag">切换组件</button>
  <transition>
    <header-com v-if="flag"></header-com>
    <footer-com v-else></footer-com>
  </transition>-->



<!--动画2 借助animate.css
方法3：-->
<!--  <button @click="flag=!flag">切换组件</button>
  <transition name="custom-classes-transition"
              enter-active-class="animate__animated animate__fadeInUpBig"
              leave-active-class="animate__animated animate__zoomOutUp">
    <header-com v-if="flag"></header-com>
    <footer-com v-else></footer-com>
  </transition>-->



<!--动画  mode
方法4-->
<!--  <button @click="flag=!flag">切换组件</button>
  <transition name="custom-classes-transition"
              enter-active-class="animate__animated animate__fadeInUpBig"
              leave-active-class="animate__animated animate__zoomOutUp"
              mode="in-out">
&lt;!&ndash;    mode="out-in"   先出去再进来     mode只能用在组件动画中，标签里不行&ndash;&gt;
&lt;!&ndash;    mode="in-out"   先进来再出去&ndash;&gt;
    <header-com v-if="flag"></header-com>
    <footer-com v-else></footer-com>
  </transition>-->



  <button @click="addNew">num++</button>

<!--方法5-->
<!--  使用is属性-->
<!--  <component :is="com" ref="headerCom"></component>-->
  <component :is="com" ref="header-com"></component>



<!--  <div id="box">box</div>-->
  <div ref="box123">box</div>
  <div ref="dom">元素</div>


</div>
</template>

<style scoped lang="less">
.v-enter {
  transform: translateX(-300px);
}

.v-enter-to {
  transform: translateX(0);
}

.v-enter-active {
  transition: transform 3s;
}

.v-leave {
  transform: translateX(0px) rotate(0deg);
}

.v-leave-to {
  transform: translateX(300px) rotate(360deg);
}

.v-leave-active {
  transition: transform 4s;
}
</style>
